<template>
	<view class="Skeleton"
		:style="{ 'background-color': bgcolor, padding: padding + 'rpx',marginTop:`${marginTop}rpx`,width:`${Width}` }">
		<u-skeleton :rows="rows" :title="title" :loading="loading" :rowsHeight="rowsHeight" :rowsWidth="rowsWidth"
			:animate="animate" :avatar="avatar" :avatarSize="avatarSize" :avatarShape="avatarShape" v-if="loading"></u-skeleton>
		<slot v-else></slot>
	</view>
</template>

<script>
	export default {
		name: 'LoadingView',
		props: {
			Width: {
				type: [String, Number],
				default: '100%'
			},

			marginTop: {
				type: [String, Number],
				default: 0
			},
			padding: {
				type: [String, Number],
				default: 0
			},
			bgcolor: {
				type: String,
				default: 'transparent'
			},
			rows: {
				type: [String, Number],
				default: 0
			},
			title: {
				type: Boolean,
				default: false
			},
			loading: {
				type: Boolean,
				default: true
			},
			rowsHeight: {
				type: [String, Number, Array],
				default: 18
			},
			rowsWidth: {
				type: [String, Number, Array],
				default: '100%'
			},
			animate: {
				type: Boolean,
				default: true
			},
			avatar: {
				type: Boolean,
				default: false
			},
			avatarSize: {
				type: [String, Number],
				default: 32
			},
			avatarShape: {
				type: String,
				default: 'circle'
			}
		},
		data() {
			return {}
		}
	}
</script>

<style lang="scss" scoped>
	.Skeleton {
		margin: 0 auto;
		border-radius: 10rpx;
	}
</style>